<template>
  <div v-loading="listLoading" style="min-height: 100px;">
    <el-table
      v-if="list.items.length > 0"
      ref="projectTable"
      :data="list.items"
      :row-class-name="tableRowClassName"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      @select="selectTable"
      @select-all="selectAllTable"
      @sort-change="sortMethod"
    >
      <el-table-column
        align="center"
        type="selection"
        width="50"
        fixed="left"
      />
      <el-table-column align="left" label="项目编号" width="180">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.projectNum" :content="scope.row.projectNum">
            <router-link
              :to="{name: 'projectDetail', params: { id: scope.row.id }}"
              target="_blank"
              class="project-num"
            ><div class="ellipsis">{{ scope.row.projectNum }}</div></router-link>
          </ToolTip>
          <div v-else style="color:#406EFF; cursor: pointer" @click="goOrderDetail(scope.row.id)">--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="项目名称" width="270">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.projectName"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="品牌名称" width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.brandName"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="客户性质" width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.customerProperty !== null">{{ scope.row.customerProperty | clientType }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="客户名称" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.clientName"/>
        </template>
      </el-table-column>
      <el-table-column align="right" label="含税金额(元)" min-width="130" prop="taxAmount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.taxAmount" :price="scope.row.taxAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="right" label="成本金额(元)" min-width="130" prop="costAmount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.costAmount" :price="scope.row.costAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="立项日期" min-width="110" prop="projectApprovalDate">
        <template slot-scope="scope">
          <div v-if="scope.row.projectApprovalDate">{{ scope.row.projectApprovalDate | standardFormat('YYYY/MM/DD') }}</div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="结案日期" min-width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.finishDate">{{ scope.row.finishDate | standardFormat('YYYY/MM/DD') }}</div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.projectStatus | projectStatus }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="项目备注" width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.projectRemark"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="所属部门" width="100">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.departmentName" :content="(scope.row.attributionMatrixFullName || scope.row.departmentName) | getDeptFullName">
            <div class="ellipsis">{{ scope.row.departmentName }}</div>
          </ToolTip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建人" width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.creator" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建时间" min-width="165" prop="createDate">
        <template slot-scope="scope">
          <div v-if="scope.row.createDate">{{ scope.row.createDate | standardFormat('YYYY/MM/DD HH:mm') }}</div>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder v-else style="margin-bottom: 24px" />
  </div>
</template>

<script>
import tableSelections from '../mixins/relatedSelection';
import { clientType, projectStatus } from '@/filters/status';
import { getDeptFullName } from '@/filters/dept';
import { standardFormat } from '@/filters/date';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
export default {
  name: 'ProjectOrder',
  filters: {
    getDeptFullName,
    projectStatus,
    standardFormat,
    clientType
  },
  components: {
    EmptyPlaceholder
  },
  mixins: [tableSelections],
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object | Array,
      default: () => {
        return {};
      }
    },
    selectCallback: {
      type: Boolean,
      default: false
    },
    isSelectedOrder: { // 是否为已选择订单
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      idKey: 'id',
      primaryId: 'relatedId',
      tableRefName: 'projectTable'
    };
  },
  watch: {
    list: {
      handler: function(data) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(data.items);
        });
      },
      deep: true
    }
  },
  methods: {
    sortMethod() {
      this.$emit('projectOrderSort');
    },
    goOrderDetail(id) {
      if (!id) {
        this.$message.warning('无效id');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'projectDetail',
        params: { id: id }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style scoped lang="scss">
.project-num {
  color: #406EFF;
  span {
    cursor: pointer;
  }
}
.table-selected {
  td {
    background-color: #F3F5FB;
  }
}
</style>
